<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-05-11 08:47:22
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-12-15 13:39:29
 * @FilePath: /hr_new_vue3/src/views/Management/Organization/OrganizationManagement/Structure/FileDetail/Components/Main/Components/Container/Components/OrganizationJobs/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AElet
-->
<!-- 组织详情组织内职位 -->
<template>
  <div class="wrap">
    <a-input-search
      :style="{ width: '320px', marginBottom: '20px' }"
      placeholder="请输入职位名称"
      search-button
      v-model="searchVal"
      @search="onSearch"
      @press-enter="onSearch"
    >
      <template #button-icon>
        <icon-search />
      </template>
    </a-input-search>
    <TableTurn :tableData="getData" ref="tableRef">
      <a-table-column title="职位名称" data-index="name"></a-table-column>
      <a-table-column title="在职人数" data-index="onboarding"></a-table-column>
      <a-table-column title="编制人数" data-index="headcount"></a-table-column>
      <a-table-column title="超编/缺编" data-index="sub"></a-table-column>
    </TableTurn>
  </div>
</template>

<script lang="ts" setup>
import { GetrganizationListDetailPosition } from '@/apis/management/organization/organizationManagement';

const route = useRoute();
let id = +(route.query.id as string);
let ownerType = Number(route.query.ownerType);

onBeforeRouteUpdate((to) => {
  id = Number(to.query.id);
  ownerType = Number(to.query.ownerType);
  getData();
});

let tableRef = ref();
let searchVal = ref('');
// 获取列表数据
const getData = async (pageData?: any) => {
  try {
    const res = await GetrganizationListDetailPosition({
      ...pageData,
      name: searchVal.value,
      id
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

const onSearch = () => {
  tableRef.value.loadData();
};
</script>

<style scoped lang="less">
.wrap {
  padding: 10px 20px;
}
</style>
